<template>
  <el-card style="margin-top: 10px">
    <el-breadcrumb separator="/" style="font-size: 16px">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">用户管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>标签管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <el-card style="height: 80px" >
      <el-form :inline="true" :model="user" class="demo-form-inline" style="margin-left: 100px">
        <el-form-item label="用户名称">
          <el-input v-model="user.userName" placeholder="名称"></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="user.phone" placeholder="手机号码"></el-input>
        </el-form-item>
        <el-form-item label="用户角色">
          <el-input v-model="user.roleName" placeholder="角色名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-row  style="margin-top: 10px">
      <download-excel
          class="export-excel-wrapper"
          :data="userData"
          type="xls"
          worksheet="worksheet"
          name="用户信息">
        <el-button type="primary">导出</el-button>
      </download-excel>
    </el-row>
    <el-table
        :data="userData"
        style="width: 100%">
      <el-table-column
          prop="id"
          label="用户ID"
          width="180">
      </el-table-column>
      <el-table-column
          prop="userName"
          label="用户名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="nickName"
          label="昵称">
      </el-table-column>
      <el-table-column
          prop="phone"
          label="手机号码">
      </el-table-column>
      <el-table-column
          prop="roleName"
          label="用户角色">
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间">
      </el-table-column>
      <el-table-column label="操作"  width="200px"
                       align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="success"
                     @click="openEditDialog(scope.row)">编辑</el-button>
<!--          <el-button size="mini" type="danger"-->
<!--                     @click="openDeleteConfirm(scope.row)">禁用</el-button>-->
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="用户信息" :visible.sync="editFormVisible">
      <el-form :model="editForm" label-width="120px" :rules="rules" ref="ruleForm">

        <el-form-item label="用户名" prop="userName">
          <el-input v-model="editForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nickName">
          <el-input v-model="editForm.nickName"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email" disabled>
          <el-input v-model="editForm.email"></el-input>
        </el-form-item>
        <el-form-item label="电话号码" prop="phone" disabled>
          <el-input v-model="editForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="积分" prop="points" disabled>
          <el-input v-model="editForm.points"></el-input>
        </el-form-item>
        <el-form-item label="权限" prop="name">
          <el-select placeholder="请选择">
            <el-option
                v-for="item in authorities"
                :label="item"
                :value="item">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEdit">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>

import async from "async";

export default {
  name: "user",
  data:function (){
    return{
      user: {userName:"",phone:"",roleName:""},
      userData:[],
      editForm: {},
      editFormVisible: false,
      authorities:[],
    }
  },
  methods:{

    onSubmit() {
      // let userParam = this.user
      // console.log(userParam)
      let url= 'http://localhost:8080/v1/admins/selectByUser';
      let format = this.qs.stringify(this.user);
      console.log(this.user);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
          .post(url,format).then((response)=> {
        this.userData=response.data.data;
      })
    },
    openEditDialog(item){
      // alert("打开编辑窗口,要编辑的对象是:"+item.id+item.name)
      // this.editFormVisible = true;

      let url = 'http://localhost:8080/v1/admins/user/'+item.userName+'/detail/'
      console.log("url="+url)
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
          .get(url).then((response)=>{
        let JsonResult = response.data;
        if(JsonResult.code == 1){
          this.editForm = JsonResult.data;
          this.editFormVisible=true;
          this.authorities = JsonResult.data.authorities
          console.log(JsonResult.data)
          console.log(JsonResult.data.authorities)
        } else {
          location.reload();
          this.$message.error('操作失败'+JsonResult.message);
        }

      })

    },
    openDeleteConfirm(item){
      // if(confirm("此操作将禁用【"+item.userName+"】用户，是否继续？")){
      //   let url = 'http://localhost:8080/content/tags/'+item.id+'/delete';
      //   this.axios
      //       .create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
      //       .post(url).then((response)=>{
      //     let JsonResult = response.data;
      //     if(JsonResult.state == 20000){
      //       this.$message.success("成功禁用【"+item.name+"】用户！");
      //       this.loadTagTypeList();
      //     } else {
      //       this.$message.error('操作失败'+JsonResult.message);
      //     }
      //
      //   })
      //
      // }
    },
    open() {
      this.$prompt('请输入邮箱', '提示', {
        confirmButtonText: '提交',
        cancelButtonText: '取消',
        inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
        inputErrorMessage: '邮箱格式不正确'
      }).then(({ value }) => {
        this.$message({
          type: 'success',
          message: '你的邮箱是: ' + value
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    }
  },
  created(){
    this.axios
        .create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
        .get("http://localhost:8080/v1/admins/userList").then((response)=>{
      if(response.data.code==1) {
        this.userData = response.data.data;
      }else if(localStorage.getItem("id")){
        this.$message.error("您还不是管理员,无权登录")
        setTimeout(()=>{
          history.back()
        },1000)


      }else{
        this.$message.error("请先登录")
        setTimeout(()=>{
          history.back()
        },1000)
      }
    })
  }
}
</script>

<style scoped>

</style>